import Vue from 'vue'
import Component from 'vue-class-component'
import './shareStyle.css'
import ShareItemClass from './shareItem.js'
import SortViewClass from '@/components/sortView.js'
import FilterViewClass from '@/components/filterView.js'

@Component
export default class ShareClass extends Vue {
  loading = false
  wrapperHeight = 0
  list = []
  showSort = false
  showFiter = false
  shareHistoryList = []

  created() {
    this.wrapperHeight = document.documentElement.clientHeight - 151
  }

  async getData() {
    try {
      const response = await this.$axios.post('/api/shareProducts')

      if (response) {
        this.loading = false
        this.list = this.list.concat(response)
      }
    } catch (e) {
      this.loading = false
      console.log(e)
    }
  }

  mounted() {

  }

  beforeUpdate() {
  }

  loadData() {
    this.loading = true
    this.getData()
  }

  get caculateHeight() {
    return 'height:' + String(this.wrapperHeight) + 'px'
  }

  // 点击排序按钮
  handlerShowSortView() {
    this.showFiter = false
    this.sortChangeStatus()
  }

  // 点击排序事件
  handlerSort(index) {
    console.log(index)
    setTimeout(() => {
      this.sortChangeStatus()
    }, 300)
  }

  sortChangeStatus () {
    this.showSort = !this.showSort
    let s = this.$refs.sort
    let f = this.$refs.filter
    if (this.showSort) {
      s.style = 'color:red'
      f.style = 'color:#000'
    } else {
      s.style = 'color:#000'
    }
  }

  // 点击筛选按钮
  handlerShowFilterView() {
    this.showSort = false
    this.filterChangeStatus()
  }

  // 处理点击筛选条件
  handlerFilter (index) {
    console.log(index)
    this.$router.push({name: 'filterTerm', params: {title: '分类'}})
  }

  handerFilterCancel () {
    this.filterChangeStatus()
  }

  handerFilterSure () {
    this.filterChangeStatus()
  }

  filterChangeStatus () {
    this.showFiter = !this.showFiter
    let f = this.$refs.filter
    let s = this.$refs.sort
    if (this.showFiter) {
      f.style = 'color:red'
      s.style = 'color:#000'
    } else {
      f.style = 'color:#000'
    }
  }

  createItems(e) {
    const item = this.list.map((value, index) => {
      return <ShareItemClass product={value}></ShareItemClass>
    })
    return item
  }

  render () {
    return (
      <div class = 'content'>
        <mt-header class='header' fixed title="分享">
        <mt-button style='padding-right:10px' icon="" slot="right"><icon name = 'sharedIcon' style='float:left' scale='2'/><font style='float:left;padding-left:3px;padding-top:2px'>{this.shareHistoryList.length}</font></mt-button>

        </mt-header>
          <dl class = 'shareStyleClass'>
            <dd ref='sort' onClick={this.handlerShowSortView}>默认排序 <icon style='position:relative;top:2px;left:4px' name = 'paixu' scale = '1.3'/></dd>
            <dd ref='filter' onClick={this.handlerShowFilterView}>筛选<icon style='position:relative;top:2px;left:4px' name = 'shaixuan' scale = '1.5'/></dd>
          </dl>

          <SortViewClass defaultSort='默认' v-show={this.showSort} onDismiss={this.sortChangeStatus} onClick={index => this.handlerSort(index)} ></SortViewClass>
        <FilterViewClass v-show={this.showFiter} onSure={this.handerFilterSure} onDismiss={this.handerFilterSure} onClick={this.handlerFilter}></FilterViewClass>
        <div class="pageScroll" ref="wrapper" style={this.caculateHeight + ';padding-top:0'} v-infinite-scroll={this.loadData} infinite-scroll-disabled={this.loading}
             infinite-scroll-distance="0">
          <div>
            {this.createItems()}
          </div>
          <p v-show={this.loading} class="loading">
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </p>
        </div>
      </div>
    )
  }
}
